import React, { Component } from 'react'
import { Form, Input, Select } from 'antd'
import "./index.css"

const { Option } = Select

export default class AddClass extends Component {
  state = { parent: undefined, name: '' }
  // 收集 select 的选中的数据
  handleChange = (value) => {
    this.setState({ parent: value })
  }
  // 收集 input 输入的数据
  getClassNeam = (event) => {
    const { value } = event.target
    this.setState({ name: value })
  }
  componentDidMount() {
    // 获取更新分类的数据
    let { name, parent, _id } = this.props.record
    parent = parent ? parent._id : parent
    this.setState({ name, parent, _id })
  }
  render() {
    const { name, parent } = this.props.record
    // 获取父组件传过来的分类数据
    const { levelData } = this.props
    return (
      <Form id="mon">
        <Form.Item name="select" label="所属分类" initialValue={parent}>
          <Select placeholder="一级分类" onChange={this.handleChange} allowClear={true}>
            {
              levelData.map(item => {
                return <Option value={item._id} key={item._id}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="input"
          label="分类名称"
          initialValue={name}
          rules={[{ required: true, message: '分类名称必须填写' }]}
        >
          <Input
            placeholder="请输入分类名称"
            onChange={(e) => this.getClassNeam(e)}
            autoFocus={true}
          />
        </Form.Item>
      </Form>
    )
  }
}
